<template>
  <div class="index-header">
    <div class="nav">
      <div>
        <span>
          <van-icon name="arrow-left" size=".24rem" />
        </span>
      </div>
      <div class="e">
        <span>我的E宠</span>
      </div>
      <div>
        <span>
          <van-icon name="more-o" size=".24rem"/>
        </span>
      </div>
    </div>
    <div class="name">
      <div>
        <span>
          <van-icon name="setting-o" size=".24rem" color="white"/>
        </span>
      </div>
      <div class="user">
        <div class="photo">
          <img src="https://img2.epetbar.com/dogs/7.jpg" alt="" />
        </div>
        <span class="username">主人_5ENZ1L4fh2</span>
        <div class="grade">
          <img src="https://static.epetbar.com/static_www/my_dev/vip/V0.png" alt="">
        </div>
        <div class="cz">
          <span>宠值0</span>
        </div>
        <div class="under">
            <span><img src="https://img2.epetbar.com/nowater/2020-03/26/20/6d8345b33a49f167e41bf957b05c376b.png" alt=""></span>
            <span><img src="https://img2.epetbar.com/nowater/2020-03/26/16/1c5bc04e8dd28cfd30211f75f7ca90ee.png" alt=""></span>
            <span><img src="https://img2.epetbar.com/nowater/2019-01/31/14/de8b18448de149a49288d3a2f6be91fe.png" alt=""></span>
            <span></span>
        </div>
      </div>
      <div>
        <span>
          <van-icon name="chat-o" size=".24rem" color="white"/>
        </span>
      </div>
    </div>
    <div class="order">
      <div>
        <div><img src="https://img2.epetbar.com/nowater/2020-09/28/16/56cc8cb562d0c5de26ebb6b1fe32e6f5.png" alt=""></div>
        <div><span>待付款</span></div>
      </div>
      <div>
        <div><img src="https://img2.epetbar.com/nowater/2020-09/28/16/b1daefb275c3fca4f5d90c1a4d00a764.png" alt=""></div>
        <div><span>待收货</span></div>
      </div>
      <div>
        <div><img src="https://img2.epetbar.com/nowater/2020-09/28/16/19753fbe323f6dd5016e271048174f1a.png" alt=""></div>
        <div><span>评价有礼</span></div>
      </div>
      <div>
        <div><img src="https://img2.epetbar.com/nowater/2020-09/28/16/b3f19573f82c5bd9f77fa28c28a73f17.png" alt=""></div>
        <div><span>客服中心</span></div>
      </div>
      <div>
        <div><img src="https://img2.epetbar.com/nowater/2021-02/01/11/1224764562176a03706f2b4d7b9a7d75.png" alt=""></div>
        <div><span>全部订单</span></div>
      </div>
    </div>
    <div class="money">
      <div>
        <span>3</span>
        <div class="word">优惠券</div>
      </div>
      <div>
        <span>0.00</span>
        <div class="word">余额</div>
      </div>
      <div>
        <span>0</span>
        <div class="word">E宠币</div>
      </div>
      <div>
        <span>0.00</span>
        <div class="word">红包</div>
      </div>
    </div>
    <div class="pet">
      <div class="foot1">
        <img src="https://static.epetbar.com/static_www/my_dev/pet.png" alt="">
      </div>
      <div class="foot2">
        <img src="https://static.epetbar.com/static_www/my_dev/pet_intro.png" alt="">
      </div>
      <div class="foot3"></div>
    </div>
    <div class="tool">
      <div class="tool1">
        <span><img src="https://img2.epetbar.com/nowater/2020-09/28/16/5aa7c96794f058eeb11a4425f7922f15.png" alt=""></span>
        <span><img src="https://img2.epetbar.com/nowater/2020-09/28/16/25c0d03983db6d195d0674dda5bb16fa.png" alt=""></span>
      </div>
      <ul class="tool2">
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/94b02f29de8d3d819b52edc1fc6a3117.png" alt="">
          <div><span>周期配送</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/f2024c45bf399b690a503d0781346441.png" alt="">
          <div><span>我的钱包</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2019-06/05/00/f2f93d58a1d8ee48053595c7a1fcefda.png" alt="">
          <div><span>客户中心</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/00de23de2fabdd8aca664875b78cb66f.png" alt="">
          <div><span>自助售后</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/c35331ad100f5c202f1210fc45a84134.png" alt="">
          <div><span>我的预售</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/e291cf63a337b4a47e87dc1803558335.png" alt="">
          <div><span>我的团购</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2018-11/28/16/33f1b23d29bb6a2ea395505b68920790.png" alt="">
          <div><span>我的拉新</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/7d2adeba20eff35bb70e0d4bf0481f22.png" alt="">
          <div><span>我的兑换</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/0ede3043b1a9b2bf849fc711fa234c63.png" alt="">
          <div><span>我的关注</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/30c1b4a76d01e24ad672a8dd6d3059c7.png" alt="">
          <div><span>我的捐赠</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2018-11/22/09/98c32acf49c613bbb9e576a4412855cf.png" alt="">
          <div><span>邀好友</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/b8cf99f85af1ca33da14a6129c8f1fc2.png" alt="">
          <div><span>潮品预售</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/6dbe75717b4ece8bde82bf60ccd920e9.png" alt="">
          <div><span>我的收藏</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/f02bb8b0efb128525fb1f582b5561a8a.png" alt="">
          <div><span>我的咨询</span></div>
        </li>
                <li>
          <img src="https://img2.epetbar.com/nowater/2019-10/19/15/24aa6012d8e85ea2ce7adebdbc1907c5.png" alt="">
          <div><span>我的现金券</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/42957fd87f3e4afd6dbfc395b7992719.png" alt="">
          <div><span>优惠券</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2019-11/05/14/a5201c020888233120d212462dd28243.png" alt="">
          <div><span>十克关爱</span></div>
        </li>
        <li>
          <img src="https://img2.epetbar.com/nowater/2020-06/05/16/fc1f604109daaf6dc72859c028923171.png" alt="">
          <div><span>隐私条款</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid)
Vue.use(GridItem)

import { Icon } from "vant";
Vue.use(Icon)


import axios from 'axios'
export default {
  data(){
    return{
    }
  },
  async mounted(){
    let result = await axios.get('/v3/user/UserCenter.html?version=420&system=wap&isWeb=1&distinct_id=17b16bf205d62a-080d3f2d3155f2-7e687969-1395396-17b16bf205ed3e&debug_param=');
  },
}
</script>

<style lang='stylus' scoped>
.nav 
  height: 0.5rem;
  position: relative;
  > div:first-child 
    height: 0.5rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.1rem;
  > div:last-child 
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  .e 
    width: 0.6rem;
    position: absolute;
    left: 1.5rem;
    top: 0.13rem;
  span
    font-size .16rem
.name 
  width: 100%;
  height: 2.06rem;
  background-color: #48cf58;
  position: relative;
  > div:last-child 
    height: 0.5rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
  > div:first-child 
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    left: 0.2rem;
    top: 0.2rem;
  .user
    height .7rem
    width 100%
    position absolute
    left 0
    top 0.7rem
  .photo img
    width: 0.7rem;
    height: 0.7rem;
    position: absolute;
    left: .15rem;
    top: 0
    border-radius 50%
    
  .username
    position absolute
    left 1rem
    top .1rem
    color white
  .grade img
    position absolute
    left 1rem
    bottom .1rem
    height .16rem
    width .34rem
  .cz span
    width .4rem
    height .16rem
    color white
    background-color #fd8657
    position absolute
    left 1.5rem
    bottom .1rem 
    text-align center
    font-size .08rem
    border-radius 10px
  .under
    height .35rem
    width 90%
    background-color #252525
    position absolute
    bottom -.65rem
    left .13rem
    border-radius 10px 10px 0 0
    display flex
    align-items center
    justify-content: space-between
  .under img
    width .67rem
    margin-left .1rem
     
.order
  width  94%
  height  1rem
  background-color white
  padding .4rem .1rem 0 .1rem
  margin-top .2rem
  border-radius 10px
  margin-left 3%
  display flex
  align-items center
  justify-content: space-between
  div
    text-align center
.order img
  width .25rem
  height .25rem
.order span
  font-size .12rem
  
.money
  width 94%
  height 1rem
  background-color white
  padding .4rem .1rem .1rem .1rem
  margin-left 3%
  margin-top .3rem
  border-radius 10px
  display flex
  align-items center
  justify-content space-between
  div
    text-align center
.money span
  color red
  font-weight bold
.word
  font-size .12rem
.pet
  width 94%
  height 1rem
  background-color white
  padding .2rem .1rem .1rem .1rem
  margin-left 3%
  margin-top .2rem
  border-radius 10px
  display flex
  align-items center
  justify-content: space-between
.foot1 img
  width .5rem
  height .5rem
  border-radius 50%
  margin-left .1rem
.foot2 img
  width 1.35rem
  height .3rem
  margin-left .1rem
.foot3
  width 1.4rem
.tool
  width 94%
  height 4.3rem
  margin-left 3%
  margin-top .2rem
  border-radius 10px
  background-color white
  border-radius 10px
.tool1
  display flex
  justify-content space-between  
.tool1 img
  width .84rem
  height .16rem
  margin .1rem .1rem .3rem .1rem
.tool2 li
  float left
  width 25%
  text-align center
  width .84rem
  height .5rem
  margin-bottom .2rem
.tool2 img
  width .2rem
  height .2rem
.tool2 span
  font-size .12rem
</style>